<template>
  <div class="course-user-page">
    <div class="head">全部观点</div>
    <div class="select-button">
      <el-row>
        <el-col :span="17">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-input v-model="inputNickname" placeholder="请输入用户姓名关键词" @change="pagePoints" ></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="inputKeyword" placeholder="请输入观点关键词"  @change="pagePoints"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="inputDesc" placeholder="请输入观点描述"  @change="pagePoints"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-button type="primary" plain @click="pagePoints()" >筛选</el-button>
        </el-col>
        <el-col :span="3" >
          <el-button type="primary" plain @click="clear()" >清空</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="student-list" style="display: flex;flex-direction: column;align-items: center">
      <el-table :data="tableData" border style="width: 100%">
<!--        <el-table-column type="selection" width="55">-->
<!--        </el-table-column>-->
        <el-table-column fixed prop="id" label="观点ID" min-width="50%" align="center">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" min-width="40%" align="center" >
        </el-table-column>
        <el-table-column prop="visibility" label="可见性" min-width="60%" align="center" >
        </el-table-column>
        <el-table-column prop="keyword" label="观点关键词" min-width="70%" align="center" >
        </el-table-column>
        <el-table-column prop="description" label="观点描述" min-width="80%" align="center" >
        </el-table-column>
        <el-table-column prop="answerNumber" label="评论" min-width="30%" align="center" >
        </el-table-column>
        <el-table-column prop="fire" label="点赞" min-width="30%" align="center" >
        </el-table-column>
        <el-table-column prop="heat" label="观点热度" min-width="50%" align="center" >
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" min-width="50%" align="center" >
        </el-table-column>
        <el-table-column prop="gmtModified" label="更新时间" min-width="50%" align="center" >
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="80">
          <template slot-scope="scope">
            <el-button @click="showOperationModel(scope.row.id,scope.$index)" type="text" size="medium">观点修改</el-button>
            <el-button @click="showVisibilityModel(scope.row.id,scope.$index)" type="text" size="medium">可视权限</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 20, 40]"
          :page-size="8"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(total)">
        </el-pagination>
      </div>
    </div>



    <el-dialog title="操作" show-close :visible.sync="visibilityVisible">
      <el-form label-width="120px">
        <el-form-item label="可视权限">
          <el-select v-model="visibilityType" filterable style="min-width: 450px">
            <el-option
                v-for="(item,index) in visibilityTypes"
                :key="item"
                :label="item"
                :value="index">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="visibilityVisible = false">取 消</el-button>
        <el-button type="primary" @click="upgrade">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="操作" show-close :visible.sync="pointBindDialogVisible">
      <el-form label-width="120px">
        <el-form-item label="观点关键词">
          <el-input v-model="currentPointInfo.keyword"></el-input>
        </el-form-item>
        <el-form-item label="观点描述">
          <el-input v-model="currentPointInfo.description"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="pointBindDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StudentManageView",
  data() {
    return {
      total: 0,
      currentSize: 8,
      currentPage: 1,
      selectExamineState: '',
      inputNickname:"",
      inputKeyword:'',
      inputDesc:'',
      visibilityType : 0,
      visibilityTypes:["仅自己可见","仅关注可见","全部可见"],
      inputUpdateKeyword:"",

      pointBindDialogVisible: false,
      visibilityVisible : false,
      currentPointId: "",
      currentPointInfo: {
        id: null,
        keyword:"",
        description:'',
        visibility:""
      },


      departmentTree: null,
      loading: false,
      debounceClock: null,

      pointId : '',
      auditId: '',
      questionId: '',

      tableData: [],
    };
  },
  mounted() {
    this.questionId = this.$route.params.id
    this.pointId = this.$route.query.linkId
    this.auditId = this.$route.query.auditId
    this.pagePoints();
  },
  methods: {
    pagePoints() {
      this.$api.pagePoints({
        pageSize: this.currentSize,
        pageNow: this.currentPage,
        nickname: this.inputNickname || '',
        keyword: this.inputKeyword || '',
        description:this.inputDesc || "",
        status: this.selectExamineState,
        id: this.pointId,
        questionId : this.questionId
      })
        .then((res) => {
          let list = res.data.rows;
          this.total = res.data.totalPage
          this.tableData = list
          for (let i = 0; i < list.length; i++) {
            list[i].gmtCreate = this.gmtToDate(list[i].gmtCreate)
            list[i].gmtModified = this.gmtToDate(list[i].gmtModified)
            if(list[i].visibility==0){
              list[i].visibility = "仅自己可见"
            }
            if(list[i].visibility==1){
              list[i].visibility = "仅关注可见"
            }
            if(list[i].visibility==2){
              list[i].visibility = "全部可见"
            }
          }
        });
    },
    handleSizeChange(val) {
      this.currentSize = parseInt(val);
      this.pagePoints();
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val);
      this.pagePoints();
    },

    showOperationModel(pointId,index) {
      this.currentPointId = pointId
      this.currentPointInfo = this.tableData[index]
      this.pointBindDialogVisible = true
      console.log(this.currentPointInfo)
    },
    showVisibilityModel(currentPointId,index) {
      this.currentPointId = currentPointId
      this.visibilityVisible = true
      this.visibilityType = this.tableData[index].visibility
    },

    upgrade() {
      this.$api.upgrade({
        auditId: this.auditId,
        linkId : this.currentPointId,
        visibility: this.visibilityType,
        type : 1,// 对于后端AuditContentTypeEnum枚举值
      }).then(res => {
        console.log(res)
        this.visibilityVisible = false
        this.pagePoints()
      })
    },

    update() {
      this.$api.pointUpdata(this.currentPointInfo).then(res => {
        this.pointBindDialogVisible = false
        console.log(res)
        this.pagePoints()
      })
    },
    clear(){
      this.inputNickname = ''
      this.inputKeyword = ''
      this.inputDesc = ''
      this.selectExamineState = ''
      this.pagePoints()
    },


    gmtToDate(gmt) {
      let da = new Date(gmt);
      let year = da.getFullYear();
      let month = da.getMonth() + 1;
      let date = da.getDate();
      let hours = da.getHours();
      let minutes = da.getMinutes();
      let seconds = da.getSeconds();
      return [year, month, date].join("-") + " " + [hours, minutes, seconds].join(':');
    }
  },
  watch: {

  }
};
</script>

<style scoped>
.course-user-page{
  margin-top: 20px;
  width: 100%;
}


.head {
  padding-bottom: 10px;
}

.select-button {
  padding: 10px 0;
}

.student-list {
  width: 100%;
  padding: 10px 0;
  display: flex;
}
</style>
